<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style>
     h1,h2,h3,h4,h5,h6{
       margin: 0;
       padding: 0;
     }
     .main{
       height: 500px;
       width: 500px;
       border: 1px solid red;
       display: inline-block;
     }
     .main #main_top{
       height: 50px;
       width: 40%;
       text-align: center;
       border: 1px solid red;
       line-height: 50px;
     }
     .main #main_bottom{
       height: 50px;
       width: 40%;
       text-align: center;
       border: 1px solid red;
       line-height: 50px;
     }
     #yinCan{
       display: none;
       height: 500px;
       width: 500px;
     }
    </style>
</head>
<body>
<div class="main" >
  <div id="main_top" onclick=" main_topEven()" ondblclick="main_topEvenOut()">品牌</div>
  <div id="main_bottom" onclick="main_bottomEven()" onmouseout="main_bottomEvenOut()" >价格 </div>
</div>
<div id="yinCan">

</div>
<script>
  function main_topEven(){
    let main_top = document.getElementById("yinCan");
    main_top.style.display = "block";
    main_top.innerHTML =
            "<ul>" +
            "<li><a href='#'>Apple维达</a></li>" +
            "<li><a href='#'>（Vinda）心相印</a></li>" +
            "<li><a href='#'>（Mind Act Upon Mind）</a></li>" +
            "<li><a href='#'>洁柔（C&S）</a></li>" +
            "<li><a href='#'>小米（MI）</a></li>" +
            "<li><a href='#'>华为（HUAWEI）</a></li>" +
            "<li><a href='#'>清风植护OPPOvivo</a></li>" +
            "</ul>";
    main_top.style.position = "relative";
    main_top.style.top = "-500px";
    main_top.style.left = "500px";
  }
  function main_topEvenOut(){
    let main_top = document.getElementById("yinCan");
    main_top.style.display = "none";
  }
  function main_bottomEven(){
    let main_bottom = document.getElementById("yinCan");
    main_bottom.style.display = "block";
    main_bottom.innerHTML =
            "<ul>"+
            "<li><a href='#'>0-40</a></li>" +
            "<li><a href='#'>40-200</a></li>" +
            "<li><a href='#'>200-700</a></li>" +
            "<li><a href='#'>700-3100</a></li>" +
            "<li><a href='#'>3100-7000</a></li>" +
            "<li><a href='#'>7000-238000</a></li>"+
            "</ul>";
    main_bottom.style.position = "relative";
    main_bottom.style.top = "-500px";
    main_bottom.style.left = "500px";

  }
  function main_bottomEvenOut(){
    let main_bottom = document.getElementById("yinCan");
    main_bottom.style.display = "none";
  }
</script>
</body>
</html>